<template>
  <div>
    <div class="flex justify-between mb-[1rem]">
      <a-form :layout="'inline'" :model="{}">
        <a-form-item :label="t['门店名称']">
          <SelectorListSelector
            v-model="query.filterId"
            :placeholder="t['门店名称']"
            v-model:store-name="query.storeName"
            @change="list"
          ></SelectorListSelector>
        </a-form-item>

        <a-form-item :label="t['账号名称']">
          <a-input v-model="query.username" :placeholder="t['请输入账号名称']"></a-input>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" :disabled="table.loading" @click="list">
            {{ t["搜索"] }}
          </a-button>
        </a-form-item>
      </a-form>
      <div class="flex gap-2">
        <a-dropdown>
          <a-button type="text">
            {{ t["按时间补发"] }}
            <IconDown />
          </a-button>
          <template #content>
            <a-doption
              v-for="(item, key) in reissueTimeList"
              :key="key"
              @click="reissueWithTime(item.value)"
            >
              {{ t[item.label] }}
            </a-doption>
          </template>
        </a-dropdown>
        <ExportButton @change="exportFile"></ExportButton>
      </div>
    </div>
    <a-table
      v-model:selected-keys="keys"
      :columns="translateColumns(columns.columns)"
      row-key="batchName"
      :data="table.data"
      :row-selection="{
        selectedRowKeys: keys
      }"
      :loading="table.loading"
      :pagination="{
        total: query.total,
        pageSize: query.pageSize,
        pageNum: query.pageNum
      }"
      @page-size-change="pageSizeChange"
      @page-change="pageChange"
    >
      <template #data="{ record }">
        <div class="flex gap-4 justify-center">
          {{ record.timeout }} | {{ record.suc }} | {{ record.wait }}
        </div>
      </template>

      <template #triggerDesc="{ record }">
        {{
          getOptionLabel({
            options: triggerTypeOptions,
            value: record.triggerType
          })
        }}
      </template>
      <template #operation="{ record }">
        <a-button-group>
          <a-button @click="reissue(record)" :loading="table.loading">
            {{ t["补发"] }}
          </a-button>
          <a-button @click="view(record)">
            <IconEye />
          </a-button>
        </a-button-group>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { exportQueue, reissueQueue } from "@/api/service/lcd-queue/lcdQueue";
import { ITime, reissueTimeList } from "@/data/options/selection";
import { getOptionLabel } from "@/utils/form";
import { Message } from "@arco-design/web-vue";
import columns from "../data/group.column";
import { triggerTypeOptions } from "../data/options";
import { detailQuery, listDetail } from "../table/data";
import { list } from "./curd";
import { displayDetail, keys, query, table } from "./table";

const t = translate("公共模块");

onMounted(() => {
  list();
});
const exportFile = (data: ITime) => {
  exportQueue(data);
};
const pageChange = (page: number) => {
  query.value.pageNum = page;
  list();
};

const pageSizeChange = (pageSize: number) => {
  query.value.pageSize = pageSize;
  list();
};

const reissueWithTime = async (time: ITime) => {
  console.log(time);

  const { msg } = await reissueQueue({
    ...time,
    filterId: query.value.filterId
  });
  Message.info(msg);
};

const reissue = async (record: any) => {
  table.value.loading = true;
  const { msg } = await reissueQueue({
    batch: record.batchName
  });
  table.value.loading = false;
  Message.info(msg);
};

const view = (record: any) => {
  displayDetail.value = true;
  detailQuery.value.batchName = record.batchName;
  listDetail();
};
</script>

<style lang="scss" scoped></style>
